<layout-top-menu>
  <template v-slot:filter>
    <div class="g-table-top-action__right">
      <el-select
        size="small"
        class="g-table-top-action__left--block g-table-top-action__left--row"
        v-model="filterForm.state"
        placeholder="选择授权状态"
        clearable
        @change="$search">
        <el-option
          v-for="(item, k) in DEADLINE_STATE_OPTIONS"
          :key="k"
          :label="item.codeName"
          :value="item.codeNum">
        </el-option>
      </el-select>
      <el-search
        size="small"
        v-model="filterForm.courseName"
        class="g-table-top-action__left--block g-table-top-action__left--row"
        isBasic
        @search="$search"
        @clear="() => {filterForm.courseName = ''; $search()}"
        placeholder="请输入课程名称">
      </el-search>
    </div>
  </template>
  <div :class="$store.state.appPrefix + '-p-course-index'" v-loading="isPageLoading">
    <div class="course-list">
      <template v-if="tableList.length > 0">
        <div v-for="item in tableList" class="course-it">
          <div class="course-content">
            <!-- <div class="course-img">
              <img :src="item.imgUrl || require('assets/images/course-default.png')" alt="">
            </div> -->
            <div class="course-info">
              <h3 class="course-title">{{ item.courseName }}</h3>
              <span :class="['course-status', {'is-active': parseInt(item.deadlineState, 10) === 0}]">{{ DEADLINE_STATE[item.deadlineState] }}</span>
              <div class="course-meta">
                <div class="meta-it course-lesson">课时：{{ item.lessonCount }}个</div>
                <div class="meta-it course-validity">有效期：{{ getTimeStr(item.deadline) }}</div>
                <div class="meta-it course-progress">
                  学习进度：{{parseInt(item.finishLessonCount / item.lessonCount * 100, 10)}}%
                  <el-progress :percentage="parseInt(item.finishLessonCount / item.lessonCount * 100, 10)" define-back-color="#E5E5E5" color="#3DBA6D"></el-progress>
                </div>
              </div>
            </div>
          </div>
          <div class="course-actions">
            <!-- <el-button size="small" @click="goStudy(item.id)">删除课程</el-button> -->
            <el-button v-if="parseInt(item.deadlineState, 10) === 0" class="enter-study-btn" type="primary" size="small" @click="$goCourse(item)">{{parseInt(item.finishLessonCount / item.lessonCount * 100, 10) > 0 ? '继续学习' : '进入学习'}}</el-button>          
            <el-button v-else size="small" @click="$goCourse(item)">查看课程</el-button>
          </div>
        </div>
      </template>
      <no-record tips="暂无课程，快去加入吧" v-else></no-record>
    </div>
    <el-pagination
      class="g-table-bottom g-pagination"
      background
      :hide-on-single-page="true"
      :layout="PAGE_CONFIG.simpleLayout"
      :total="totalCount"
      :page-size="pageSize"
      :current-page.sync="pageNo"
      @current-change="$handlePageChange">
    </el-pagination>
  </div>
</layout-top-menu>
